<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in arr">
        学生的姓名为:{{item.name}} , 年龄为:{{item.age}}
      </li>
    </ul>
    <div>该班级的平均年龄为:{{averageAge}}</div> 
    <div>该班级的未成年人数为:{{count}}</div> 
    <button @click="add">添加学生</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      点击按钮, 发现了什么?
    */
    var vm = new Vue({
      el: '#app',
      computed: {
        averageAge: function() {
          var total = 0
          for(var i=0;i<this.arr.length;i++) {
            total += this.arr[i].age
          }
          return total / this.arr.length
        },
        count: function(){
          var temp = 0
          for(var i=0;i<this.arr.length;i++) {
            if (this.arr[i].age < 18) {
              temp++
            }
          }
          return temp
        }
      },
      data: {
        arr: [
          {
            id: 1,
            name: 'zhangsan',
            age: 19
          },
          {
            id: 2,
            name: 'lisi',
            age: 8
          },
          {
            id: 3,
            name: 'wangwu',
            age: 15
          }
        ]
      },
      methods: {
        add: function(){
          var newObj = {
            id: 4,
            name: 'zhaoliu',
            age: 13
          }
          this.arr.push(newObj)
        }
      }
    });
  </script>
</body>
</html>
